<template>
  <transition name="detial">
  <div class="home">
    <!-- 头 -->
    <div class="head">
      <div class="img">
        <img src="https://sct.mykj2020.com/static/logo.png" alt="" />
      </div>
      <div class="dec">
        <p>外卖试吃福利团</p>
        <p>每天点外卖，先看试吃团</p>
      </div>
    </div>

    <!-- 主体 -->

    <div
      class="
        main
        md-example-child
        md-example-child-scroll-view
        md-example-child-scroll-view-3
      "
    >
      <md-scroll-view
        ref="scrollView"
        :scrolling-x="false"
        @end-reached="add"
        auto-reflow
      >
        <!-- 标题图片 -->
        <div class="img">
          <!-- https://image.mykj2020.com/2021/12/24/1640353437117.jpg -->
          <img :src="res.img" alt="" />
        </div>
        <div class="dec">
          <div>
            <div class="top">
              <p>
                <span>￥{{ res.bumoney }}</span
                >餐补红包
              </p>
              <p>
                今天还有<span>{{ res.num }}</span
                >份
              </p>
            </div>
            <div class="mid">
              <p>{{ res.specask }}</p>
              <p>{{ res.askdec }}</p>
            </div>
            <p>
              <span>美团</span>
              <span>{{ res.name }}</span>
            </p>
          </div>

          <div>
            <p>
              <i class="iconfont icon-shijian-xianxing"></i
              ><span>开抢时间:{{ res.time }}</span>
            </p>
            <p>
              <i class="iconfont icon-dizhi"></i><span>{{res.address
}}</span>
            </p>
          </div>

          <div>
            <p>￥<span>4</span></p>
            <div>
              <p>美团专享优惠券</p>
              <p>领取后下单立减</p>
            </div>
            <p>立即领取</p>
          </div>
        </div>

        <!-- 要求 -->
        <div class="ask">
          <div>流程指引</div>
          <p>第1步:报名抢餐补名额</p>
          <p>每天名额有限，先报名再下单</p>
          <p>
            第2步:立即到指定的外卖平台下单，当天下单有效
            直接扫码跳转小程序，或打开APP搜索店名下单皆可
          </p>
          <p>
            第3步:下单后按要求完成任务，并提交订单资料
            实付金额、订单号确保正确，订单截图必须按示例图提交
          </p>
          <p>
            第4步:等待餐补红包，48小时内审核，72小时内打款周末、假期处理周期延误，请勿催款，感谢理解
          </p>
        </div>
      </md-scroll-view>
    </div>

    <!-- 尾 -->
    <div class="foot"   @click="change">
      <div
        v-for="(i, idx) of current"
        :key="idx"
      
        :class="idx + 'last'"
      >
        <i :class="[i.icon ,idx + 'last']"  ></i>
        <p :class="idx + 'last'">{{ i.tit }}</p>
      </div>
    </div>
  </div>
   </transition>
</template>

<script>
import { bookone,bookupdate } from "@/apis/client";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "detial",
  data() {
    return {
      id: null,
      current: [
        { tit: "首页", icon: "iconfont icon-shouye" },
        { tit: "我的订单", icon: "icon-dingdan" },
        { tit: "抢补餐名额" },
      ],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    console.log(this.id, "id");
    this.data();
  },
  methods: {
    add() {
      console.log(1);
    },
    async data() {
      let res = await bookone({ id: this.id });
      console.log(res,'resdata');
      this.$store.commit("changebookone", res.data);
    },

    async  change(e) {

      console.log(e.target);

      if (e.target.classList.contains("0last")) {
        console.log(1);
         this.$router.back()
      }
       
        if (e.target.classList.contains("1last")) {
             this.$router.push({name:'order'})
      } 

      if (e.target.classList.contains("2last")) {
           
            let res = await bookupdate({uid:this.res.uid, state: '1' });
            this.$toast.info('成功抢到名额',1000)
            console.log(res,'修改2');
           
            
      } 

    },
  },

  computed: {
    ...mapState({
      res: (state) => state.bookone,
    }),
  },
};
</script>

<style lang="scss" scoped>
 .detial-enter-active,.detial-leave-active{
    transition: all .3s;
  }
  .detial-enter,.detial-leave-to{
      transform: translateX(100%);

  }
  .detial-enter-to,.detial-leave{
     transform: translateX(0);
  }







.home {
  height: 100%;
  display: flex;
  width: 100%;
  position: absolute;
  z-index: 99;
  top: 0;left: 0;
  box-sizing: border-box;
  flex-direction: column;
  color: rgb(29, 27, 27);
  background: white;
 
  .head {
    height: 150px;
    background: white;
    display: flex;
    font-size: 42px;
    width: 100%;
    .img {
      width: 140px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      img {
        width: 80%;
        height: 80%;
      }
    }
    .dec {
      font-size: 38px;
      margin-top: 24px;
      & > p:nth-of-type(2) {
        color: #9f9f9f;
      }
    }
  }
  .main {
    height: 0;
    flex-grow: 1;
    padding: 0 20px;
   
    background: #f0f2fa;
    box-sizing: border-box;
    ::v-deep .md-scroll-view-more {
      font-size: 22px;
    }

    .img {
      width: 100%;
      height: 606px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .dec {
      
      background: white;
      border-radius: 20px;
      padding: 0 20px;
      box-sizing: border-box;
      margin-top: 40px;
      & > div:nth-of-type(1) {
        .top {
          display: flex;
          justify-content: space-around;
          align-items: center;
          & > p:nth-of-type(1),
          & > p:nth-of-type(2) {
            color: red;
            font-size: 40px;
            letter-spacing: 2px;
            span {
              font-size: 76px;
              font-weight: bold;
            }
          }
          & > p:nth-of-type(2) {
            color: rgb(29, 27, 27);
            span {
              color: red;
            }
          }
        }

        .mid {
          display: flex;
          justify-content: center;
          align-items: center;
          & > p:nth-of-type(1),
          & > p:nth-of-type(2) {
            margin-top: 30px;
            padding: 10px 20px;
            border-radius: 10px;
            background: #c0aea9;
            margin-right: 50px;
          }
          & > p:nth-of-type(2) {
            margin: 0;
            margin-left: 50px;
            margin-top: 30px;
          }
        }
        & > p {
          margin-left: 40px;
          margin-top: 60px;
          & > span:nth-of-type(1) {
            padding: 10px 16px;
            background: #fdac00;
            border-radius: 16px;
            color: black;
            font-size: 42px;
            margin-right: 20px;
          }
          & > span:nth-of-type(2) {
            font-weight: bold;
            font-size: 50px;
          }
        }
      }

      & > div:nth-of-type(2) {
        height: 194px;
        background: #f5f8fa;
        margin-top: 50px;
        margin-left: 40px;
        color: #9ea1a1;
        font-family: "微软雅黑";
        font-weight: bold;
        font-size: 40px;
        padding: 35px;
        box-sizing: border-box;
        border-radius: 20px;
        p {
          margin-bottom: 20px;

          span {
            margin-left: 10px;
            line-height: 46px;
          }
        }
        & > p:nth-of-type(2) {
          display: flex;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
      & > div:nth-of-type(3) {
        border-radius: 16px;
        margin-top: 40px;
        width: 964px;
        height: 164px;
        background: url("https://sct.mykj2020.com/static/images/icon/xq_yhj_img.png")
          no-repeat center/cover;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
        & > p:nth-of-type(1) {
          span {
            font-size: 80px;
          }
        }
        & > p:nth-of-type(2) {
          color: red;
          font-weight: bold;
        }
        & > div {
          font-size: 38px;
          & > P:nth-of-type(1) {
            font-size: 46px;
          }
        }
      }
    }

    .ask {
      height: 730px;
      background: white;
      margin-top: 30px;
      border-radius: 20px;
   
      padding: 30px 16px;
      & > div {
        font-size: 58px;
        margin-bottom: 20px;
      }
      & > p {
        font-size: 40px;
        line-height: 80px;
        font-weight: bold;
      }
    }
  }

  .foot {
    height: 140px;

    display: flex;
    justify-content: space-around;
    background: white;
    align-items: center;
    .active {
      color: red;
    }
    & > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      align-items: center;
      & > i {
        font-size: 66px;
      }
      & > p {
        font-size: 20px;
      }
    }
    & > div:nth-of-type(3) {
      width: 684px;
      height: 114px;
      border-radius: 62px;

      line-height: 114px;
      background: red;
      color: white;
      & > p {
        font-size: 50px;
      }
    }
  }
}


</style>

